<template>
  <div>
    <Search></Search>

    <div class="category">
        <!-- 左边 -->
      <van-sidebar v-model="activeKey">
        <van-sidebar-item :title="item.name" v-for="item in categoryList" :key="item.id" @click="onCurrent(item.id)"/>
      </van-sidebar>

      <!-- 右边 -->
      <div class="categore_r" >
        <div class="categore_img" :style="`background: url(${currentCategory.banner_url}) no-repeat;background-size: 100% 100%;`">
            <div class="categore_bj">
                <div class="categore_text">{{currentCategory.front_name}}</div></div>
            
        </div>
        <div class="mytitle">
            <div class="line"></div>
            <div class="title">{{currentCategory.name}}</div>
        </div>

        <van-grid column-num="3">
        <van-grid-item :icon="val.wap_banner_url"  :text="val.name" v-for="val in currentCategory.subCategoryList" :key="val.id"/>
        </van-grid>
    </div>
    </div>
  </div>
</template>

<script>
import Search from '../components/Search.vue'
import {GetCatalogList,GetCurrentList} from "../request/api"
export default {
    components:{
        Search
    },
  data() {
    return {
        activeKey:0,
        categoryList:[],
        currentCategory:{}
    };
  },
  created(){
      GetCatalogList().then(res=>{
          console.log(res.data);
          if(!res.errno===0)return;
          let {categoryList,currentCategory}=res.data;
          this.categoryList=categoryList;
          this.currentCategory=currentCategory;
      })
  },
  methods:{
      onCurrent(id){
            GetCurrentList({
                id
            }).then(res=>{
                // console.log(res.data);
                let {currentCategory}=res.data;
                this.currentCategory=currentCategory
            })
      }
  }
};
</script>
 
<style lang = "less" scoped>
.category{
    display: flex;
}
.categore_r{
        flex: 1;
        height: 580px;
        background-color: #fff;
        .categore_img{
            height: 140px;
            border-radius: 5px; 
            overflow: hidden;  
            position: relative;
            box-shadow: 0 0 6px #000;
            .categore_bj{
                width: 100%;
                height: 100%;
                position: absolute;
                left: 0;top: 0;
                background-color: rgba(0,0,0,0.5);
                .categore_text{
                    color: #fff;
                    margin: 60px;
                    text-align: center;
                }
            }
        }
        
        .mytitle{
            height: 30px;
            margin: 7px;
            text-align: center;
            position: relative;
            .title{
                background-color: #fff;
                 width: 30%;
                 height: 20px;
                 position: absolute;
                 left: 0;right: 0;top: 0;bottom: 0;
                 margin: auto;
            }
            .line{
                width: 50%;
                height: 2px;
                background-color: rgb(199, 199, 199);
                position: absolute;
                right: 0;left: 0;top: 0;bottom: 0;
                margin: auto;
            }
        }

    }
</style>